<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端</title>
    <link rel="stylesheet/less" href="/css/reset.less">
    <link rel="stylesheet/less" href="/css/index.less">
    <link rel="stylesheet/less" href="/css/commom.less">
</head>

<body>
    <header class="box_shadow">
        <div class="search">
            <label class="search_item">
                <img src="./images/search.png">
                <input type="text" placeholder="搜索内容" />
            </label>
        </div>
    </header>
    <div class="menu">
        <div class="menu_item">
            <img src="./images/cate_1.png" alt="">
            <div>美食</div>
        </div>
        <div class="menu_item">
            <img src="./images/tiantianquan.png" alt="">
            <div>甜品</div>
        </div>
        <div class="menu_item">
            <img src="./images/milk.png" alt="">
            <div>牛奶</div>
        </div>
        <div class="menu_item">
            <img src="./images/shucai.png" alt="">
            <div>蔬菜</div>
        </div>
        <div class="menu_item">
            <img src="./images/cha.png" alt="">
            <div>茶</div>
        </div>
        <div class="menu_item">
            <img src="./images/hanbao.png" alt="">
            <div>快餐</div>
        </div>
        <div class="menu_item">
            <img src="./images/yinliao.png" alt="">
            <div>饮料</div>
        </div>
        <div class="menu_item">
            <img src="./images/haixian.png" alt="">
            <div>海鲜</div>
        </div>

    </div>
    <div class="foods">
        <div class="banner">
            <img src="./images/banner.png" alt="">
        </div>
        <div class="details">
            <div class="recommed">
                <div>美食</div>
                <div>更多>></div>
            </div>
        </div>
        <div class="good_content">
            <div class="good_item">
                <img src="./images/list_1.png">
                <div class="good_title">美味蔬果拼盘</div>
                <div class="good_price">￥288</div>
                <div class="good_num">3524人已买</div>
            </div>
            <div class="good_item">
                <img src="./images/list_1.png">
                <div class="good_title">美味蔬果拼盘</div>
                <div class="good_price">￥288</div>
                <div class="good_num">3524人已买</div>
            </div>
            <div class="good_item">
                <img src="./images/list_1.png">
                <div class="good_title">美味蔬果拼盘</div>
                <div class="good_price">￥288</div>
                <div class="good_num">3524人已买</div>
            </div>
            <div class="good_item">
                <img src="./images/list_1.png">
                <div class="good_title">美味蔬果拼盘</div>
                <div class="good_price">￥288</div>
                <div class="good_num">3524人已买</div>
            </div>
        </div>

    </div>
    <footer>
        <div class="foot">
            <div class="nav_item">
                <a href="./index.html">
                <img src="./images/home_active.png">
                <div>主页</div>
                </a>
            </div>
            <div class="nav_item">
                <a href="./store.html">
                    <img src="./images/store.png">
                    <div>店铺</div>
                </a>
            </div>
            <div class="nav_item">
                <a href="#">
                <img src="./images/order.png">
                <div>订单</div>
            </a>
            </div>
            <div class="nav_item">
                <a href="#">
                <img src="./images/me.png">
                <div>我的</div>
            </a>
            </div>

        </div>

    </footer>

</body>

</html>
<!-- 自动计算html的字体大小 -->
<script src="/js/common.js"></script>

<!-- less -->
<script src="/js/less.js"></script>

<!-- jquery -->
<script src="./js/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        $(window).scroll(function (event) {
            let toTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (toTop != 0) {
                $('header').removeClass("box_shadow")
            } else {
                $('header').addClass("box_shadow")
            }
        })
    })
</script>